<template>
	<div>
		<div>
			<!-- 卡片式内容区 -->
			<el-card class="box-card">
				<!-- 定义一个div，专门用来放置图表 -->
				<div id="main" style="width: 600px;height:400px;"></div>
			</el-card>
		</div>
		<div>
			<!-- 定义一个div，专门用来放置图表 -->
			<div id="bz" style="width: 600px;height:400px;"></div>
		</div>
	</div>
</template>

<script>
	/* 引入echarts的支持 */
		import * as echarts from 'echarts';
		// 	引入支付
		import {getChart} from "@/api/discharge/discharge";
		export default {
		        methods:{
		          	// 静态图表统计
		            jt(){
		                // 1.基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('main'));
						// 2.指定图表的配置项和数据
						var option = {
							title: {
								text: 'ECharts 入门示例'
							},
							tooltip: {},
							legend: {
								data: ['销量']
							},
							xAxis: {
								data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
							},
							yAxis: {},
							series: [{
								name: '销量',
								type: 'bar',
								data: [5, 20, 36, 10, 10, 20]
							}]
						};
						// 3.使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
		            },
					
					//  在method中定义获取动态效果的函数
					dt() {
						//	调用后端接口，获取数据
						getChart().then(res=>{
							var chartDom = document.getElementById('bz');
							var myChart = echarts.init(chartDom);
							var option;
							
							option = {
							  title: {
							    text: 'Referer of a Website',
							    subtext: 'Fake Data',
							    left: 'center'
							  },
							  tooltip: {
							    trigger: 'item'
							  },
							  legend: {
							    orient: 'vertical',
							    left: 'left'
							  },
							  series: [
							    {
							      name: 'Access From',
							      type: 'pie',
							      radius: '50%',
							      data: res.data,
							      emphasis: {
							        itemStyle: {
							          shadowBlur: 10,
							          shadowOffsetX: 0,
							          shadowColor: 'rgba(0, 0, 0, 0.5)'
							        }
							      }
							    }
							  ]
							};
							
							option && myChart.setOption(option);
						})
						
						}
		        },
				mounted() {
					// 调用静态函数
		            this.jt();
					//	
					this.dt();
				}
			}
</script>

<style>
	
</style>